<template>
  <view class="test-container">
    <view class="title">测试验证码发送</view>
    <view class="input-item">
      <input v-model="phone" type="number" placeholder="请输入手机号" maxlength="11" />
    </view>
    <button @click="testSendCode" class="test-btn">发送验证码</button>
    <view class="log-container">
      <text class="log-title">请求日志:</text>
      <text class="log-content">{{ requestLog }}</text>
    </view>
    <view class="log-container">
      <text class="log-title">响应日志:</text>
      <text class="log-content">{{ responseLog }}</text>
    </view>
    <view class="log-container">
      <text class="log-title">错误日志:</text>
      <text class="log-content">{{ errorLog }}</text>
    </view>
  </view>
</template>

<script>
import { sendSmsCode } from '@/api/system/user'

export default {
  data() {
    return {
      phone: '19852725830',
      requestLog: '',
      responseLog: '',
      errorLog: ''
    }
  },
  methods: {
    testSendCode() {
      if (!this.phone) {
        uni.showToast({ title: '请输入手机号', icon: 'none' })
        return
      }

      this.requestLog = `发送验证码请求: ${this.phone}`
      this.responseLog = ''
      this.errorLog = ''

      sendSmsCode(this.phone).then(response => {
        this.responseLog = JSON.stringify(response, null, 2)
        uni.showToast({ title: '发送成功', icon: 'success' })
      }).catch(error => {
        this.errorLog = JSON.stringify(error, null, 2)
        uni.showToast({ title: '发送失败', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.test-container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}
.input-item {
  margin-bottom: 20rpx;
}
.test-btn {
  background-color: #007aff;
  color: white;
  margin: 20rpx 0;
}
.log-container {
  margin-top: 20rpx;
  border: 1rpx solid #eee;
  padding: 10rpx;
}
.log-title {
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}
.log-content {
  font-size: 28rpx;
  white-space: pre-wrap;
}
</style>